<template>
  <div class="saas-modal">
    <uni-transition
      :mode-class="['fade']"
      :styles="maskClass"
      :show="mask_show"
      @tip="closeMask"
    />
    <div
      v-if="mask_show"
      class="modal"
      @tap="closeMask"
    >
      <div
        class="modal__panel"
        @tap.stop=""
      >
        <div class="modal__panel--title">
          {{ title }}
        </div>
        <div
          class="modal__panel--desc"
          v-html="desc"
        />
        <div class="modal__panel--btn">
          <div
            class="btn"
            @tap.stop="closeMask"
          >
            {{ cancelBtnText }}
          </div>
          <div
            class="btn success"
            @tap.stop="define"
          >
            {{ btnText }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import uniTransition from "./UniTransition";
export default {
	name: "Modal",
	components: {
		uniTransition,
	},
	props: {
		// 是否禁用
		title: {
			type: String,
			default: "标题",
		},
		desc: {
			type: String,
			default: "描述",
		},
		btnText: {
			type: String,
			default: "确定",
		},
		cancelBtnText: {
			type: String,
			default: "取消",
		},
		modalType:{
			type:String,
			default:""
		}
	},
	data() {
		return {
			mask_show: true,
		};
	},
	computed: {
		maskClass() {
			return {
				position: "fixed",
				bottom: 0,
				top: 0,
				left: 0,
				right: 0,
				"z-index": 9,
				"background-color": "rgba(0, 0, 0, 0.4)",
			};
		},
	},
	methods:{
		closeMask(){
			this.$emit("cancel");
		},
		define(){
			this.$emit("define",this.modalType);
			this.$emit("cancel");

		}
	}
};
</script>
<style lang="scss" scoped>
.modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  .modal__panel {
    padding: 40rpx 46rpx 48rpx;
    width: 560rpx;
    background: #ffffff;
    border-radius: 20rpx;
    &--title {
      font-size: 30rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #151517;
    }
    &--desc {
      padding: 24rpx 0 28rpx;
      font-size: 22rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #9d9da2;
      min-height: 110rpx;
      text-align: center;
    }
    &--btn{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 8rpx;
      .btn{
        width: 210rpx;
  height: 70rpx;
border: 1rpx solid #151517;
border-radius: 36rpx;
font-size: 30rpx;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
text-align: center;
color: #151517;
line-height: 70rpx;
      }
      .success{
          background-color: #151517;
          color:#fff;
      }
    }
  }
}
</style>
